<template>
    <div class="album-center">
        <el-page-header @back="goBack" class="detail-page-header">
            <template #content>
                    <!-- 显示项目名称 -->
                    <span class="text-large font-600 mr-3"> {{ '相册照片列表' }} </span>
            </template>
            <!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
        </el-page-header>
        <el-divider />
        <el-main class="album-page-main" style="padding: 0;">
            <div class="detail-page-main-box-btn">
                <el-button type="primary" @click="addAlbum">
                    新增
                </el-button>
            </div>
            <div class="album-page-main-content">
                <el-row :gutter="20"  style="width: 100%;">
                    <el-col :span="4" v-for="item in albumList" :key="item.id">
                        <div class="album-page-main-content-item">
                            <el-image :src="item.image" style="width: 100%;height: 100px;" fit="contain">
                                <template #placeholder>
                                    <div class="image-slot">加载中<span class="dot">...</span></div>
                                </template>
                            </el-image>
                            <div>{{ item.title }}</div>
                            <div>
                                <el-button type="info" class="album-page-main-content-button" link @click="handleEdit(item)">编辑</el-button>
                                <el-button type="danger" class="album-page-main-content-button" link @click="handleDelete(item.id)">删除</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <edit-popup v-if="showEdit" ref="editRef" @success="getPhotoList" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted, defineProps, shallowRef, computed, watch, reactive, nextTick } from 'vue';
    import type { FormInstance, UploadProps } from 'element-plus'
    import { apiPhotoList, apiPhotoDel, apiPhotoEdit } from '@/api/album';
    import photoImage from '../../assets/images/photo.png'
    import feedback from '@/utils/feedback';
    import EditPopup from './photoEdit.vue'
    const editRef = shallowRef<InstanceType<typeof EditPopup>>()
    const showEdit = ref(false)
    
    // 父传子
    const props = defineProps({
        memorialId: {
            type: Number || String,
            default: ''
        },
        albumId: {
            type: Number || String,
            default: ''
        }
    })
    // 子传父
    const emit = defineEmits<{
        (e: 'back-to-list', from: string): void;
    }>();

    
    
    // 获取数据
    const albumList = ref([]);
    const getPhotoList = async () => {
        const data = await apiPhotoList({album_id: props.albumId})
        console.log(data)
        albumList.value = data.list
    }
    // --- 方法 ---

    
    
    // 返回
	const goBack = () => {
		console.log('返回上一页...');
		// 实现返回逻辑, 比如使用 vue-router 的 router.back()
		// alert('返回上一页 (模拟)');
		emit('back-to-list', 'photoList')
	};
    // 新增相册
    const addAlbum = async () => {
        console.log('新增相册...');
        showEdit.value = true
        await nextTick()
        editRef.value?.setFormData({
            mu_id: props.memorialId,
            album_id: props.albumId
        })
        editRef.value?.open('add')
    }
    // 修改相册
    const handleEdit = async (data: any) => {
        showEdit.value = true
        await nextTick()
        editRef.value?.open('edit')
        editRef.value?.setFormData(data)
    }
    // 删除相册
    const handleDelete = async (id: any[] | number) => {
        await feedback.confirm('确定要删除？')
        await apiPhotoDel({ id })
        getPhotoList()
    }
    onMounted(() => {
        getPhotoList()
    })

    
</script>

<style scoped>
    .album-page-main-content{
        margin-top: 20px;
    }
</style>